<template>
    <a-modal
        title="函数编辑器"
        :width="800"
        :bodyStyle="{ minHeight: '500px' }"
        @ok="handleOk"
    >
        <a-row :gutter="[8, 8]">
            <a-col :span="8">
                <a-table
                    rowKey="name"
                    :dataSource="golbal.event"
                    :columns="[
                        {
                            dataIndex: 'name',
                        },
                    ]"
                    :showHeader="false"
                    :pagination="{
                        hideOnSinglePage: true,
                    }"
                    :rowSelection="rowSelection"
                    size="small"
                >
                </a-table>
            </a-col>
            <a-col :span="16">
                <a-form layout="vertical">
                    <a-row>
                        <a-col :span="24">
                            <a-form-item label="名称">
                                <a-input v-model:value="current.name">
                                </a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="代码块">
                                <a-textarea
                                    v-model:value="current.func"
                                    :rows="20"
                                ></a-textarea>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-col>
        </a-row>
    </a-modal>
</template>

<script lang="ts">
import { computed, defineComponent, inject, ref } from "vue";

export default defineComponent({
    emits: ["ok", "update:current"],
    props: {
        current: Object,
    },
    setup(props, { emit }) {
        const golbal = inject("golbal");
        const selectChange = function (keys: string[], selectTion: any[]) {
            select.value = keys;
            emit("update:current", selectTion[0]);
        };
        const select = ref<any[]>([props.current && props.current.name]);

        const rowSelection = computed(() => {
            if (props.current) {
                return {
                    selectedRowKeys: select.value,
                    onChange: selectChange,
                    type: "radio",
                };
            }

            return null;
        });

        const handleOk = () => {
            emit("ok");
        };

        return {
            select,
            golbal,
            rowSelection,
            handleOk,
        };
    },
});
</script>
